Text box (text input)

Allows users to enter a single line of text.

Examples

Usage

Use a text box when the user needs to enter a single line of text, such as a name or email address. Every text box must have a label. If the field is required, show an asterisk (*) next to the label.

You can include optional guidance text to help users understand what to enter. If the guidance is longer than a short sentence, use a guidance accordion instead.

Choose the appropriate input type in the HTML to help with accessibility, validation and the right on-screen keyboard on touch-screen devices.

Common input types

text – for general short text
number - for numbers
email – for email addresses
tel – for phone numbers
password – for concealed input

Do:

use a text box only for single-line input, for longer text, use a text area
choose a text box size that matches the length of content users are expected to enter
always include a visible label that clearly describes what the user should enter

Avoid:

using a text box when users must choose from a set list of options, instead use a select or radio button group
relying on placeholder text because it can be inaccessible to some users, may not meet contrast requirements, and can be mistaken for pre-filled content

Please correct the errors and try again.

Required fields are marked with an asterisk

Text box


                <turas-text-box asp-for="TextBoxBasic"></turas-text-box>


                <div class="form-group form-text-box "><label class="control-label   " for="TextBoxBasic">Text box</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxBasic" name="TextBoxBasic" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxBasic" data-valmsg-replace="true"></span>
</div>
</div>

Text box required


                <turas-text-box asp-for="TextBoxBasicRequired" />


                <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxBasicRequired">Text box required</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" aria-required="true" type="text" data-val="true" data-val-required="The Text box required field is required." id="TextBoxBasicRequired" name="TextBoxBasicRequired" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxBasicRequired" data-valmsg-replace="true"></span>
</div>
</div>

Text box guidance text

I am some guidance text


                <turas-text-box asp-for="TextBoxWithGuidanceText" guidance-text="I am some guidance text" />


                <div class="form-group form-text-box "><label class="control-label   " for="TextBoxWithGuidanceText">Text box guidance text</label>
<div id="TextBoxWithGuidanceText-guidance" class="form-field-guidance-text">I am some guidance text</div>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" aria-describedby="TextBoxWithGuidanceText-guidance" type="text" id="TextBoxWithGuidanceText" name="TextBoxWithGuidanceText" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxWithGuidanceText" data-valmsg-replace="true"></span>
</div>
</div>

Text box guidance text accordion

A paragraph.

List item
List item
List item


                <turas-text-box asp-for="TextBoxWithGuidanceTextAccordion">

                    <turas-form-guidance collapses>
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                    </turas-form-guidance>

                </turas-text-box>


                <div class="form-group form-text-box "><label class="control-label   " for="TextBoxWithGuidanceTextAccordion">Text box guidance text accordion</label>
<div class="turas-form-guidance-collapse">
            <button class="turas-form-guidance-collapse-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-41539b2e-e824-418b-9023-86d37f552371" aria-expanded="false" aria-controls="collapse-41539b2e-e824-418b-9023-86d37f552371"><span class="visually-hidden">Guidance</span></button>              
            <div class="turas-form-guidance-collapse-content collapse" id="collapse-41539b2e-e824-418b-9023-86d37f552371">   
                <div class="form-field-guidance-text"><span class=""></span>
                    
                        <p>A paragraph.</p>
                        <ul>
                            <li>List item</li>
                            <li>List item</li>
                            <li>List item</li>
                        </ul>
                       
                </div>
            </div></div>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxWithGuidanceTextAccordion" name="TextBoxWithGuidanceTextAccordion" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxWithGuidanceTextAccordion" data-valmsg-replace="true"></span>
</div>
</div>

Text box form field width


                <turas-text-box asp-for="TextBoxWithColumnClasses" field-column-widths="col-md-4" />


                <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxWithColumnClasses">Text box form field width</label>
<div class="row">
<div class="col-md-4">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" aria-required="true" type="text" data-val="true" data-val-required="The Text box form field width field is required." id="TextBoxWithColumnClasses" name="TextBoxWithColumnClasses" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxWithColumnClasses" data-valmsg-replace="true"></span>
</div>
</div>

Text box additional classes


                <turas-text-box asp-for="TextBoxAdditionalClasses" additional-classes="mt-50" />


                <div class="form-group form-text-box mt-50"><label class="control-label   " for="TextBoxAdditionalClasses">Text box additional classes</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxAdditionalClasses" name="TextBoxAdditionalClasses" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxAdditionalClasses" data-valmsg-replace="true"></span>
</div>
</div>

Text box in a row

Text box in a row

Text box in a row


                <div class="row">
                    <div class="col-md-4">
                        <turas-text-box asp-for="TextBoxInRowOne" />
                    </div>
                    <div class="col-md-4">
                        <turas-text-box asp-for="TextBoxInRowTwo" />
                    </div>
                    <div class="col-md-4">
                        <turas-text-box asp-for="TextBoxInRowThree" />
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group form-text-box "><label class="control-label   " for="TextBoxInRowOne">Text box in a row</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxInRowOne" name="TextBoxInRowOne" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowOne" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-text-box "><label class="control-label   " for="TextBoxInRowTwo">Text box in a row</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxInRowTwo" name="TextBoxInRowTwo" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowTwo" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group form-text-box "><label class="control-label   " for="TextBoxInRowThree">Text box in a row</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxInRowThree" name="TextBoxInRowThree" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowThree" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                </div>

Text box in a row required

Text box in a row required

Text box in a row required


                <div class="row">
                    <div class="col-md-4">
                    <turas-text-box asp-for="TextBoxInRowOneRequired" />
                    </div>
                    <div class="col-md-4">
                    <turas-text-box asp-for="TextBoxInRowTwoRequired" />
                    </div>
                            <div class="col-md-4">
                    <turas-text-box asp-for="TextBoxInRowThreeRequired" />
                    </div>
                </div>


                <div class="row">
                    <div class="col-md-4">
                    <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxInRowOneRequired">Text box in a row required</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" aria-required="true" type="text" data-val="true" data-val-required="The Text box in a row required field is required." id="TextBoxInRowOneRequired" name="TextBoxInRowOneRequired" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowOneRequired" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                    <div class="col-md-4">
                    <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxInRowTwoRequired">Text box in a row required</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" aria-required="true" type="text" data-val="true" data-val-required="The Text box in a row required field is required." id="TextBoxInRowTwoRequired" name="TextBoxInRowTwoRequired" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowTwoRequired" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                            <div class="col-md-4">
                    <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxInRowThreeRequired">Text box in a row required</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" aria-required="true" type="text" data-val="true" data-val-required="The Text box in a row required field is required." id="TextBoxInRowThreeRequired" name="TextBoxInRowThreeRequired" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxInRowThreeRequired" data-valmsg-replace="true"></span>
</div>
</div>
                    </div>
                </div>

Text box hide validation message


                <turas-text-box asp-for="TextBoxBasicRequiredHideValidationMessage" hide-validation-message />


                <div class="form-group form-text-box "><label class="control-label requiredFieldMarker  " for="TextBoxBasicRequiredHideValidationMessage">Text box hide validation message</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" aria-required="true" type="text" data-val="true" data-val-required="The Text box hide validation message field is required." id="TextBoxBasicRequiredHideValidationMessage" name="TextBoxBasicRequiredHideValidationMessage" value="" />
</div>

</div>
</div>

Text box readonly


                    <turas-text-box asp-for="TextBoxReadOnly" readonly />


                    <div class="form-group form-text-box "><label class="control-label   " for="TextBoxReadOnly">Text box readonly</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" readonly="readonly" type="text" id="TextBoxReadOnly" name="TextBoxReadOnly" value="I am some readonly text" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxReadOnly" data-valmsg-replace="true"></span>
</div>
</div>

Text box disabled


                    <turas-text-box asp-for="TextBoxDisabled" asp-is-disabled="True" />


                    <div class="form-group form-text-box "><label class="control-label   " for="TextBoxDisabled">Text box disabled</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" disabled="disabled" type="text" id="TextBoxDisabled" name="TextBoxDisabled" value="I am a disabled text box" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxDisabled" data-valmsg-replace="true"></span>
</div>
</div>

Text box hide label


                <turas-text-box asp-for="TextBoxHideLabel" hide-label />


                <div class="form-group form-text-box "><label class="control-label   sr-only" for="TextBoxHideLabel">Text box hide label</label>
<div class="row">
<div class="col">
<input class="form-control" placeholder="" data-val-normalizer="trim-whitespace" type="text" id="TextBoxHideLabel" name="TextBoxHideLabel" value="" />
</div>
<span class="field-validation-valid" data-valmsg-for="TextBoxHideLabel" data-valmsg-replace="true"></span>
</div>
</div>

Parameters for turas-text-box

asp-for - binds the text box to a model property
guidance-text - provides additional guidance for the user
field-column-widths - sets the column width for the text box
additional-classes - allows for custom CSS classes to be added
hide-validation-message - suppresses validation messages for the field
readonly - makes the text box read-only
asp-is-disabled - disables the text box
hide-label - hides the label associated with the text box

Testing

Check that the text box:

can be used with a keyboard only, with no keyboard traps
allows users to type, edit and delete text using only the keyboard
shows a visible focus state when the text box receives focus
is announced correctly by screen readers, including its label, role and current value
clearly communicates any format requirements before users enter information
hint text or instructions are read out (for example, character limits or formatting guidance) by screen readers
supports browser autocomplete where appropriate
error messages are announced by screen readers and associated with the text box
input does not trigger unexpected changes while typing
required fields are clearly communicated to all users
character limits (if present) are communicated clearly and updated as users type
remains usable at 400% zoom and supports reflow without horizontal scrolling

Developer considerations

When using the text box component in your form:

provide a visible label using <label for=""> and an ID
use the appropriate HTML input type where available (for example, email, tel or search)
use the appropriate autocomplete attribute where recognised values are expected
provide format requirements before the user enters information
make sure the text box has a programmatic name (via label or aria-labelledby)
use aria-describedby to associate hint text and error messages with the text box
write error messages that explain what went wrong and how to fix it
do not rely on placeholder text as a label
make sure a visible focus state that meets contrast requirements
make sure the text box remains usable when text is resized and content reflows
avoid auto-submitting or triggering unexpected changes while typing
make sure sufficient touch target size and spacing, with a target size of at least 24 × 24 CSS pixels
if a character limit is used, communicate it clearly
update the character count correctly as users type
provide feedback when users approach or exceed the limit
make sure error states are clearly visible and are programmatically associated with the text box

Required fields

If your form contains fields that users must complete:

clearly indicate when the text box is required by using a visual indicator such as an asterisk
do not rely on the visual indicator alone (for example, an asterisk) to communicate that a field is required, include the help text “Required fields are marked with an asterisk *” at the top of every page of the form
make sure the required state of the text box is programmatically available to assistive technologies using aria-required="true

Previous

Single select

Next

Text area

Was this page helpful?